<template>
  <el-card class="box-card" style="--el-card-padding:0">
    <template #header>
      <div class="card-header">
        <span style="color:#409EFF">安捷力主数据</span>
      </div>
    </template>
    <div class="list">
      <div v-for="(item,index) in ascTypeList" :key="index"  class="list-item">
        <div v-if="item.code !== 'down'" class="link hover-r" @click="navTo(item.name,{}, item.code)">
          <div>{{ item.name }}</div>
          <div><span style="font-weight: bold">{{ item.value }}</span> 条 <el-icon :size="15"><ArrowRightBold /></el-icon> </div>
        </div>
        <div v-else class="link">
          <div>{{ item.name }}</div>
          <div @click="showDownContent = !showDownContent" class="down-content-handle"><span style="font-weight: bold">{{ item.value }}</span> 条
            <el-icon v-if="showDownContent" :size="15"><ArrowDownBold /></el-icon>
            <el-icon v-else :size="15"><ArrowRightBold /></el-icon>
          </div>
          <div class="down-content" v-if="showDownContent">
            <el-link v-for="down in downItemList"  @click="navTo(`${item.name}-${down.fac}`, down, item.code)">
              {{down.fac}}
            </el-link>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {ascIndex} from '@/scripts/api'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
const {data} = await ascIndex();
const {ascSummary,downFacs} = data

const ascTypeList =  ref([{
  name:'别称',
  value:ascSummary['别称总量'],
  code:'alias'
},{
  name:'ASC名称',
  value:ascSummary['asc名称总量'],
  code:'asc'
},{
  name:'行业数据',
  value:ascSummary['市场总量'],
  code:'market'
},{
  name:'UP MAPPING',
  value:ascSummary['up总量'],
  code:'up'
},{
  name:'DOWN MAPPING',
  value:ascSummary['down总量'],
  code:'down'
},{
  name:'市场 MAPPING',
  value:ascSummary['市场对应关系总量'],
  code:'marketRel'
}])

const downItemList = ref(downFacs)
const showDownContent = ref(true)
const navTo=(typeName, fac, typeCode)=>{
  if(typeCode === 'asc'|| typeCode === 'market'){
    router.push({
      path: '/mdm/asc/AscNameTypeView',
      query: { typeName, typeCode}
    })
  }else if(typeName.indexOf('DOWN MAPPING')>=0){
    router.push({
      path: '/mdm/fac/CommonTypeView',
      query: { typeName,facId: fac.dataowner, facName:fac.fac, subType:'市场类'}
    })
  }else{
    router.push({
      path: '/mdm/asc/TypeView',
      query: { typeName, typeCode}
    })
  }

}
</script>
<style scoped>
.card-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  background-color: #efefef;
}
.list-item .link{
  display: flex;justify-content: space-between;padding: 25px 20px 25px 20px;font-size: 22px;flex-wrap: wrap;
  text-indent: 10px;
  color: #333;
}
.list-item .link.hover-r:hover{
  background-color: rgba(64,158,255,.15);
}
.list-item{
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
}
.list-item:nth-last-child(1)::after{
  border-bottom: none
}
.list-item .link .down-content{
  font-size: 18px;
  padding-top: 20px;
  flex-basis: 100%;
  display:flex;
  flex-wrap: wrap;
}
.list-item .link .down-content a{
  color: rgb(64, 158, 255);
  padding-right: 10px;
  margin: 0 10px;
  font-size: 18px;
}
.list-item .link .down-content a:hover{
  font-size: 20px;
}
.down-content-handle:hover{
  cursor: pointer;
}
</style>
